<template>
	<view style="display: flex;flex-direction: column;">
		
		<view class="item" style="margin-top: 20rpx;" v-if="showNodata">
			<no-data content="暂无合同信息"></no-data>
			
			<!-- <text>补录合同信息</text> -->
		</view>
		
		<view class="item" style="padding: 20rpx 30rpx 0;margin-top: 20rpx;" v-if="showManual">
			<u-form :model="model" ref="uform" label-width="auto">
			
				<view style="height: 50rpx;display: flex;align-items: center;">
					<u-icon name="order" color="#1573FF" label="基本信息" disabledColor="#ffffff" label-color="#333333"></u-icon>
				</view>
			
				<u-form-item :required="true" label="合同编号" borderBottom>
					<u-input v-model="model.contractCode" inputAlign="right" :disabled="!canEdit" disabledColor="#ffffff"
					 border="none" placeholder="请输入合同编号">
					</u-input>
				</u-form-item>
				
				<u-form-item :required="true" label="合同生效日期" borderBottom @click="canEdit && pickerShow(1)">
					<u-input v-model="model.contractTimeStart" inputAlign="right" placeholder="请选择合同生效日期" :disabled="true"
						disabledColor="#ffffff" border="none"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				
				<u-form-item label="合同终止日期" borderBottom @click="canEdit && pickerShow(2)">
					<u-input v-model="model.contractTimeFinish" inputAlign="right" placeholder="请选择合同终止日期" :disabled="true"
						disabledColor="#ffffff" border="none"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			
				<u-form-item label="合同备注" borderBottom>
					<u-input v-model="model.contractDesc" inputAlign="right" :disabled="!canEdit" disabledColor="#ffffff"
					 border="none" placeholder="请输入备注">
					</u-input>
				</u-form-item>
				
				<view style="display: flex;flex-direction: column;">
					<u-form-item label="合同附件">
						<!-- <view class="car-photo" style="padding: 20rpx 0; display: block;font-size: 30rpx;color: #333;">订单附件</view> -->
					</u-form-item>
					
					<lr-upload :disabled="!canEdit" ref="upload1" tag="1" @on-change="uploadOnChange"></lr-upload>
				</view>
			
			</u-form>
		</view>
		
		<view style="margin: 20rpx;text-decoration: underline;text-align: center;color: #1573FF;" v-if="showAuto" @click="goWebview">
			点击查看合同
		</view>
		
		
		<view style="height: 100rpx;"></view>
		
		<!-- <view class="button-container" v-if="showBtn"> -->
		<view class="button-container">
			<button class="btn-item" @click="btnClick">{{btntext}}</button>
		</view>
		
		<!-- 开始时间 -->
		<u-datetime-picker
			:show="startShow"
			v-model="value1" :maxDate="value2"
			mode="date" @confirm="timeConfirm"
			@cancel="startShow=false"></u-datetime-picker>
			
		<!-- 结束时间 -->
		<u-datetime-picker
			:show="endShow"
			v-model="value2" :minDate="value1"
			mode="date" @confirm="timeConfirm"
			@cancel="endShow=false"></u-datetime-picker>
		
	</view>
</template>

<script>
	import lrUpload from '@/components/global/lr-upload.vue'
  import {isVideo} from "@/common/calc";
	
	export default {
		components: {
			lrUpload,
		},
		data() {
			return {
				value1:Number(new Date()),
				value2:Number(new Date())+12*30*24*3600*1000,
				startShow:false,
				endShow:false,
				showBtn:false,
				contractId:'',
				orderCarId:'',
				orderCode:'',
				type:'',
				model:{},
				showNodata:false,
				showManual:true,
				showAuto:false,
				btntext:'',
				btnType:0,
				rightType:0,
				canEdit:false,
			}
		},
		methods: {
			//图片上传成功回调
			uploadOnChange(tag, resultList, resultObjList) {
				console.log(tag, resultList, resultObjList);
				switch (tag) {
					case '1': //订单附件
						console.log('resultList===>', resultList)
						this.model.pictureList = resultList;
						
						break
				}
			},
			
			//picker是否显示
			pickerShow(type) {
				switch (type) {
					case 1:
						this.startShow = true;
						break
					case 2:
						this.endShow = true;
						break
				}
				this.pickerType = type;
			},
			
			timeConfirm(e){
				let timeStr = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				
				switch (this.pickerType) {
					case 1: //租期开始时间
						this.startShow = false;
						this.model.contractTimeStart = timeStr;
						break
					case 2: //租期结束时间
						this.endShow = false;
						this.model.contractTimeFinish = timeStr;
						break
				}
			},
			
			btnClick(){
				switch(this.btnType){
					case 1:
						//补录合同信息
						uni.navigateTo({
							url:'/pagesB/contract/add-contract-type?noWorkFlow=true&addContract=true&type='+this.type
							+'&orderCarId='+this.orderCarId
							+'&orderCode='+this.orderCode
						})
						
						break
					case 2:
						//变成编辑
						this.btntext = '确认'
						this.btnType = 4
						this.showBtn = true
						
						uni.setNavigationBarTitle({
							title:'编辑合同'
						})
						
						this.canEdit = true
						break
					case 3:
						//重新生成合同
						uni.navigateTo({
							url:'/pagesB/contract/contract-template?from=1&type='+this.type
						})
						
						break
					case 4:
						//提交
						this.model.contractType = 1;
						
						if(uni.$u.test.isEmpty(this.model.contractCode)){
							this.$u.toast('请输入合同编号')
							return
						}
						
						if(uni.$u.test.isEmpty(this.model.contractTimeStart)){
							this.$u.toast('请选择合同开始时间')
							return
						}
						
						this.$u.api.appUpdateContract(this.model).then(res=>{
							this.$u.toast('修改成功')
							this.getData()
						})
						break
				}
			},
			
			goWebview(){
				//跳转查看在线合同
				uni.navigateTo({
					url:'/pagesB/contract/contract-webview?mUrl='+this.model.urlHtm
				})
			},
			
			getData(){
				let that = this;
				
				that.$u.api.getContractDetails({
					contractId:that.contractId
				}).then(res=>{
					that.model = res
					
					
					
					that.contractId = that.model.contractId
					uni.setNavigationBarTitle({
						title:'合同信息'
					})
					
					that.showNodata = false
					if(2==that.model.contractType){
						//自动
						that.showAuto = true
						that.showManual = false
						
						that.rightType = 3
						
						that.btntext = '重新生成合同'
						that.showBtn = true
						that.btnType = 3
						
					}else if(1==that.model.contractType){
						//手动
						that.showAuto = false
						that.showManual = true
						
						that.rightType = 2
						
						that.btntext = '编辑'
						that.showBtn = true
						that.btnType = 2
						
						that.canEdit = false
						
					}else{
						that.showNodata = true
						that.showManual = false
						that.showAuto= false
						
						that.btntext = '补录合同'
						that.btnType = 1
						that.showBtn = true
					}
					
					that.$forceUpdate()
					
					setTimeout(()=>{
						//不延迟会报错
						if(!uni.$u.test.isEmpty(that.model.pictureList) && !uni.$u.test.isEmpty(that.$refs.upload1)){
							
							that.$refs.upload1.fileList1=that.model.pictureList.filter(item => {
                return 1== item.type_file||1==item.typeFile
              }).map(item=>{
								
								return {
                  ...item,
									message: "",
									size: 52363,
									status: "success",
									thumb: that.baseImgUrl()+item,
                  type: isVideo(item),
									url: item
								}
							})
						}
						
					},1000)
					
				})
			}
			
		},
		onLoad(op) {
			this.contractId = 'null'!=op.contractId?op.contractId:''
			this.orderCarId = 'null'!=op.orderCarId?op.orderCarId:''
			this.orderCode = 'null'!=op.orderCode?op.orderCode:''
			this.type = 'null'!=op.type?op.type:''
			
			
			if(uni.$u.test.isEmpty(this.contractId)){
				
				this.showNodata = true
				this.showManual = false
				this.showAuto= false
				
				this.btntext = '补录合同'
				this.btnType = 1
				this.showBtn = true
			}else{
				this.getData()
			}
			
			let that = this
			
			uni.$on('seltemplate', res=>{
				console.log('收到了合同模板', res);
				
				setTimeout(()=>{
					if(1==res.from){
						uni.showLoading({
							title:'重新生成中'
						})
						that.$u.api.appUpdateContract({
							contractCode:that.model.contractCode,
							orderCarId:that.model.orderCarId,
							templateId:res.id,
							contractId:that.model.contractId,
							contractType:2,
						}).then(result=>{
							that.$u.toast('重新生成成功！')
							that.getData()
							uni.hideLoading()
						}).catch(e=>{
							uni.hideLoading()
						})
					}
				}, 500)
				
			})
			
			uni.$on('add-contract-success', res=>{
				if(!uni.$u.test.isEmpty(res)){
					that.contractId = res
					that.getData()
				}
			})
			
		},
		onUnload() {
			uni.$off('seltemplate')
		}
	}
</script>

<style lang="scss" scoped>
	.v-nodata{
		display: flex;
		flex-direction: column;
		
	}
	
	

</style>
